import React, { FC, useContext, useState } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { LoginFormContext } from '../../LoginFormContext';
export interface IProps extends ICompProps {}
GetCodeBtn.defaultProps = {} as Partial<IProps>;
function GetCodeBtn(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('GetCodeBtn', className);
    const [countDownTime, setCountDownTime] = useState(60);
    const [isShowCountDown, setIsShowCountDown] = useState(false);
    const { loginForm, validateTips, setValidateTips } = useContext(LoginFormContext);

    let timerId = null;
    const onClick = () => {
        if (!loginForm.phone) return setValidateTips('请输入手机号');
        if (validateTips) return;
        setIsShowCountDown(true);
        timerId = setInterval(() => {
            setCountDownTime((countDownTime) => {
                if (countDownTime == 1) {
                    clearInterval(timerId);
                    setIsShowCountDown(false);
                    return 60;
                }
                return countDownTime - 1;
            });
        }, 500);
    };
    return (
        <RootView className={localClassName} style={style}>
            <View onClick={onClick} style={{ display: isShowCountDown ? 'none' : 'block' }}>
                发送验证码
            </View>
            <View className="countDown" style={{ display: isShowCountDown ? 'block' : 'none' }}>
                重新发送 {countDownTime}s
            </View>
        </RootView>
    );
}
export default React.memo(GetCodeBtn as FC<IProps>);
const cssBorder = ` 1px solid #cbcdd6`;
const RootView = styled(View)`
    &.GetCodeBtn {
        border-left: ${cssBorder};
        padding: 0 18px;
        font-size: 28px;
        color: #ff8828;
        .countDown {
            color: #cbcdd6;
        }
    }
`;
